<template>
  <div class="account-register">
    <contentBox>
      <el-row justify="center">
        <el-col :span="7">
          <div class="account-title">互联互通账号找回</div>
          <el-form
            :model="formModel"
            label-width="100px"
            label-position="top"
            :rules="formRules"
            ref="formRef"
          >
            <el-form-item prop="number" class="forget-password-label-zr">
              <template #label>
                <!-- <div class="big-title">输入互联互通账号</div> -->
                <div class="big-title">输入注册账号的手机号</div>
              </template>
              <el-input
                v-model="formModel.number"
                maxlength="11"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="validCode"
              class="code-parent forget-password-label-zr"
            >
              <template #label>
                <div>
                  <div class="big-title">通过手机号找回</div>
                  <div class="sub-title">
                    请点击获取验证码, 向您的手机号{{ phoneDesen }}发送验证短信
                  </div>
                </div>
              </template>
              <el-input
                v-model="formModel.validCode"
                maxlength="6"
                placeholder="请输入6位验证码"
              ></el-input>
              <span class="code-num" @click="getCode"
                >( {{ totalTime }} ) 获取验证码</span
              >
            </el-form-item>
            <div class="big-title">设置新密码</div>
            <div class="sub-title margin-bottom-8">
              密码至少8个字符，至少字母和数字
            </div>
            <el-form-item
              label="密码"
              prop="password"
              class="custom-label-conent-zr"
            >
              <el-input
                v-model="formModel.password"
                maxlength="25"
                minlength="8"
                type="password"
                show-password
                placeholder="请输入8～25个字符"
                autocomplete="new-password"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="密码确认"
              prop="password1"
              class="custom-label-conent-zr"
            >
              <el-input
                v-model="formModel.password1"
                maxlength="25"
                minlength="8"
                type="password"
                show-password
                placeholder="请输入8～25个字符"
                autocomplete="new-password"
              ></el-input>
            </el-form-item>
            <el-form-item class="account-again-btn-zr">
              <ElButton
                type="primary"
                size="large"
                class="button"
                @click="handleConfirm"
                style="width: 73%; margin-top: 62px"
                :loading="loading"
                >确定</ElButton
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </contentBox>
  </div>
</template>

<script lang="ts" setup>
import contentBox from "../content-box.vue";
import { ElMessage } from "element-plus";
import { getPhoneValidCode, resetPassword } from "@/service/dp.ts";
const loading: any = ref(false);
const totalTime: any = ref(60);
const formModel: any = ref({
  number: "",
  password: "",
  password1: "",
  validCodeReqNo: "",
  validCode: "",
});
const formRules: any = ref({
  number: [
    {
      required: true,
      message: "请输入11位手机号",
      trigger: "blur",
    },
    {
      required: true,
      message: "手机号码格式不正确",
      trigger: "blur",
      pattern: /^1[3,4,5,6,7,8,9][0-9]{9}$/,
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 8, max: 25, message: "长度在 8 到 25 个字符", trigger: "blur" },
    {
      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,25}$/,
      message: "至少8个字符,最多25个字符,且包含字母和数字",
      trigger: "blur",
    },
  ],
  password1: [
    { required: true, message: "请输入确认密码", trigger: "blur" },
    { min: 8, max: 25, message: "长度在 8 到 25 个字符", trigger: "blur" },
    {
      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,25}$/,
      message: "至少8个字符,最多25个字符,且包含字母和数字",
      trigger: "blur",
    },
  ],
  validCode: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { pattern: /^\d{6}$/, message: "验证码只能是数字", trigger: "blur" },
  ],
});
const router = useRouter();
const formRef: any = ref(null);
const timerNull: any = ref(null);
const phoneDesen: any = computed(() => {
  if (formModel.value.number.length == 11) {
    return formModel.value.number.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
  } else {
    return "";
  }
});

// 获取验证码
function getCode() {
  formRef.value.validateField(["number"], async (valid: any) => {
    if (valid) {
      if (totalTime.value != 60 && timerNull.value) {
        return;
      }
      timerNull.value = setInterval(() => {
        if (totalTime.value == 0) {
          totalTime.value = 60;
          clearInterval(timerNull.value);
        } else {
          totalTime.value--;
        }
      }, 1000);

      const res: any = await getPhoneValidCode({
        phone: formModel.value.number,
      });
      if (res.code == 200) {
        formModel.value.validCodeReqNo = res.data;
        ElMessage.success({
          message: "获取验证码成功!",
        });
      } else {
        ElMessage.error({
          message: res.msg,
        });
      }
    }
  });
}

// 重置密码
function handleConfirm() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      if (formModel.value.password1 !== formModel.value.password) {
        ElMessage.error({
          message: "密码和确认密码不一致，请重新输入!",
        });
        return;
      }
      loading.value = true;
      let params: any = {
        number: formModel.value.number,
        validCode: formModel.value.validCode,
        validCodeReqNo: formModel.value.validCodeReqNo,
        password: formModel.value.password,
      };
      const result: any = await resetPassword(params);
      if (result.code === 200) {
        router.push({
          name: "resetSuccess",
        });
      } else {
        ElMessage.error({
          message: result.msg,
        });
      }
      loading.value = false;
    }
  });
}
</script>

<style scoped>
.margin-bottom-8 {
  margin-bottom: 8px;
}
.custom-label-conent-zr {
  display: flex;
  align-items: center;
  margin-bottom: 18px !important;
}
.account-register {
  overflow: hidden;
}
.account-title {
  margin-top: 120px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 36px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 44px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-bottom: 60px;
}
.big-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.sub-title {
  /* margin-bottom: 8px; */
  margin-top: 4px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.code-parent {
  position: relative;
}
.code-num {
  position: absolute;
  right: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #0052d9;
  line-height: 22px;
  text-align: right;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
}
</style>
